<template>
    <my-update-box operation="修改用户名">
        <v-form ref="form">
            <v-row>
                <v-col>
                    <v-text-field
                            label="新用户名"
                            v-model="updateUsernameData.username"
                            :rules="[usernameRule]"
                            autofocus
                    >
                    </v-text-field>
                </v-col>
            </v-row>
            <my-code-input
                    :email.sync="updateUsernameData.email"
                    :code.sync="updateUsernameData.code"
            ></my-code-input>
            <v-row>
                <v-col>
                    <v-btn block @click="updateUsername()" color="primary">修改</v-btn>
                </v-col>
            </v-row>
        </v-form>
    </my-update-box>
</template>

<script>
    import {usernameRule, emailRule} from "../../util/rule";
    import {logout} from '../../util'
    import MyCodeInput from "../common/MyCodeInput";
    import MyUpdateBox from "./MyUpdateBox";
    export default {
        name: "MyUpdateUsername",
        components: {MyUpdateBox, MyCodeInput},
        data() {
            return {
                emailRule,
                usernameRule,
                updateUsernameData: {
                    username: '',
                    email: '',
                    code: ''
                }
            }
        },
        methods: {
            logout,
            updateUsername() {
                let self = this;
                if (!self.$refs.form.validate()) {
                    return;
                }
                self._put({
                    url: 'user/update-username',
                    data: self.updateUsernameData
                }).then(rsp => {
                    if (rsp.data.code === '00000') {
                        self.$success({message: '修改成功,请重新登录'});
                        self.logout(false);
                    } else {
                        self.$error({message: rsp.data.msg});
                    }
                }).catch(error => {
                    console.log(error);
                    self.$serverError();
                })
            }
        }
    }
</script>

<style scoped>
</style>